<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/base.css"> -->
    <style>
        /* 媒体查询使用方式一：基本不用 */
        /* @import + 媒体查询 (max-width:800px)  ==>  达到不同的屏加载不同的样式 */
        @import url("./css/base.css") (max-width:800px);
    </style>
</head>
<body>
    <!--
        有一个盒子，在不同屏上，显示不同的大小？
        答：需要知道，当前页面所在屏的大小。根据不同的屏，给盒子设置不同的大小。
            320屏   div{ w:100px; h:100px; } 
            375屏   div{ w:120px; h:120px; } 
            414屏   div{ w:150px; h:150px; } 

        如何知道当前网页所处屏的大小？
        答：媒体查询

        媒体查询：
            使用方式有三种，常用的只有一种。
     -->
</body>
</html>